<ui:composition 
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:fb="http://ogp.me/ns/fb#" >
        
    <h:form>            
        <h:outputLink value="javascript:void(0)" onclick="PF('dlg').show();" title="login">
            <p:graphicImage name="/demo/images/login.png" />
        </h:outputLink>

        <p:growl id="growl" sticky="true" showDetail="true" life="3000" />

        <p:dialog header="Login" widgetVar="dlg" resizable="false">
            <h:panelGrid columns="2" cellpadding="5">
                <h:outputLabel for="username" value="Username:" />
                <p:inputText id="username" value="#{userLoginView.username}" required="true" label="username" />

                <h:outputLabel for="password" value="Password:" />
                <p:password id="password" value="#{userLoginView.password}" required="true" label="password" />

                <f:facet name="footer">
                    <p:commandButton value="Login" update="growl" actionListener="#{userLoginView.login}"
                                     oncomplete="handleLoginRequest(xhr, status, args)" />
                </f:facet>  
            </h:panelGrid>
        </p:dialog>
    </h:form>
 
    <script type="text/javascript">
        
        function handleLoginRequest(xhr, status, args) {
            if(args.validationFailed || !args.loggedIn) {
                PF('dlg').jq.effect("shake", {times:5}, 100);
            }
            else {
                PF('dlg').hide();
                $('#loginLink').fadeOut();
            }
        }
    </script>
    

</ui:composition>    
    
